import React, { Component } from 'react';
import { Row, Col, Icon } from 'antd';


import sy_active from './images/sy_active.png'
import sy_unactive from './images/sy_unactive.png'
import fl_active from './images/fl_active.png'
import fl_unactive from './images/fl_unactive.png'
import health_active from './images/health_active.png'
import health_unactive from './images/health_unactive.png'
import my_active from './images/my_active.png'
import my_unactive from './images/my_unactive.png'

const MyIcon = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_1310653_ijnk904j1h.js', // 在 iconfont.cn 上生成
  });
const menuList = [
    {
        key: "newHealthHomePage",
        label: "首页",
        icon: "icon_jiankang",
        selected_icon: "icon_jiankang-mian",
        path: "/newHealthHomePage",
        activeIcon:sy_active,
        unActiveIcon:sy_unactive

    },
    {
        key: "exchangeList",
        label: "健康",
        icon: "icon_fuli-xian",
        selected_icon: "icon_fuli-mian",
        path: "/health",
        activeIcon:health_active,
        unActiveIcon:health_unactive
    },
    // {
    //     key: "findDrugs",
    //     label: "找药",
    //     icon: "icontubiao_zhaoyao-xian",
    //     selected_icon: "icontubiao_zhaoyao-mian",
    //     path: "/medicineHomePage",
    //     activeIcon:fl_active,
    //     unActiveIcon:fl_unactive
    // },
    {
        key: "My",
        label: "我的",
        icon: "icontubiao_wode-xian",
        selected_icon: "icontubiao_wode-mian",
        path: "/user/info",
        activeIcon:my_active,
        unActiveIcon:my_unactive

    },
];

class TabBarMenu extends Component {

    reditectPage(path){
        this.props.history.push(path)
    }
    render() {
        const {match} = this.props;
        const MenuList = menuList.map((item) => {
            const selected = match.path === item.path;
            return (
                <Col span={8} className={selected ? "selected" : ""} key={item.key}>
                    <a onClick={() => this.reditectPage(item.path)}  >
                        {/* <MyIcon type={selected ? item.selected_icon : item.icon} /> */}
                        <img src={selected ? item.activeIcon : item.unActiveIcon} style={{width:'22px',height:'22px'}} alt=""/>
                        <div>{item.label}</div>
                    </a>
                </Col>
            )
        });
        return (
            <Row className="menuTab">
                {MenuList}
            </Row>
        );
    }

}
export default TabBarMenu;
